define(()=>{
    class Cart{
        constructor(){
            //从购物车里面取出数据
            this.list = JSON.parse(localStorage.getItem('cart')) || []
            console.log(this.list)
            //获取元素
            this.tbody = document.querySelector('tbody')
            this.cartTable = document.querySelector('.cartTable')
            this.totalNum = document.querySelector('.totalNum')
            this.money = document.querySelector('.money')
            this.selectAll = document.querySelector('.selectAll')
            this.init()
        }
        init(){
            this.render()
            this.bindHtml()
            this.total()
        }
        render(){
            //判断下购物车里面有没有数据
            if(!this.list.length){
                this.tbody.innerHTML = `
                    <tr height="100">
                        <td colspan="6">
                            <h3>亲，你的购物车里面空空如也！赶紧去购物吧! <a href="/html/List.html">Go</a></h3>
                        </td>
                    </tr>
                `
            }else{
                this.tbody.innerHTML = ''
                this.list.forEach(item=>{
                    this.tbody.innerHTML += `
                    <tr>
                        <td><input type="checkbox" value="" class="select" data-id="${item.product_id}" ${item.is_select && "checked"}/></td>
                        <td>
                            <img src="${item.images[0]}" >
                            <span class="hide">${item.product_desc_ext}</span>
                        </td>
                        <td><span>${item.price_min}</span></td>
                        <td>
                            <span class="sub" data-id="${item.product_id}">-</span>
                            <input type="text" value="${item.cart_num}" />
                            <span class="add" data-id="${item.product_id}">+</span>
                        </td>
                        <td><span class="price">${item.price_min*item.cart_num}元</span></td>
                        <td><span class="del" data-id="${item.product_id}">删除</span></td>
                    </tr>
                `
                })
            }
            //数据可持续化
            localStorage.setItem('cart', JSON.stringify(this.list))
        }
        //注意点：现在的开发方式由之前的操作DOM节点形式变为操作数据驱动页面方式
        bindHtml(){
            this.cartTable.onclick = (e)=>{
                let target = e.target || e.srcElement
                //全选功能
                if(target.className == 'selectAll'){
                    let type = target.checked
                    this.list.forEach(item=>{
                        item.is_select = type
                    })
                    this.render()
                    this.total()
                }
                //单选功能
                if(target.className == 'select'){
                    let id = target.dataset.id - 0
                    //找到数组里面对应的数据修改数据的状态
                    let goods = this.list.find(item=>{return item.product_id == id})
                    goods.is_select = !goods.is_select
                    this.render()
                    this.total()
                }
                //点击增加商品数量
                if(target.className == 'add'){
                    let id = target.dataset.id - 0
                    let goods = this.list.find(item=>{return item.product_id == id})
                    //注意点：这个地方工作中跟进商品库存决定，不能固定现在主要是为了方便调试代码
                    if(goods.cart_num==10){
                        alert('亲，只能购买这么多哦!')
                        return false
                    }
                    goods.cart_num++
                    this.render()
                    this.total()
                }
                //点击减少商品数量
                if(target.className == 'sub'){
                    let id = target.dataset.id - 0
                    let goods = this.list.find(item=>{return item.product_id == id})
                    //注意点：这个地方工作中跟进商品库存决定，不能固定现在主要是为了方便调试代码
                    if(goods.cart_num==1){
                        return false
                    }
                    goods.cart_num--
                    this.render()
                    this.total()
                }
                //点击删除商品数量
                if(target.className == 'del'){
                    let id = target.dataset.id - 0
                    let index = this.list.findIndex(item=>{return item.goods_id == id})
                    this.list.splice(index, 1)
                    this.render()
                    this.total()
                    if(!this.list.length){
                        this.selectAll.checked = false
                    }
                }
                //点击清空购物车
                if(target.className == 'dlAll'){
                    //遍历数组，进行过滤
                    let res = this.list.filter(item=>{
                        //把数据里面是没有选中状态的给过滤出来，剩余的就是选中的
                        return item.is_select == false
                    })
                    //重新赋值
                    this.list = res
                    this.render()
                    this.total()
                    if(!this.list.length){
                        this.selectAll.checked = false
                    }
                }
            }
        }
        total(){
            let num = 0
            let price = 0
            this.list.forEach(item=>{
                //总价和总的数量必须是选中状态下才计算
                if(item.is_select == true){
                    num += item.cart_num
                    price += item.cart_num * item.price_min
                    let res = this.list.every(item=>{return item.is_select == true})
                    if(res){
                        this.selectAll.checked = true
                    }else{
                        this.selectAll.checked = false
                    }
                }
            })
            this.totalNum.innerHTML = num
            this.money.innerHTML = price
        }
    }
    return{
        Cart: new Cart()
    }
})
